<template>
  <view class="search-container">
    <view style="display: flex; justify-content: center; padding: 16rpx 0">
      <view class="search">
        <image
          class="search-icon"
          src="/static/images/search.svg"
          mode="aspectFit"
        />
        <input
          type="text"
          placeholder="输入销售名称进行搜索"
          focus
          v-model="keyword"
          @input="search"
          confirm-type="search"
        />
      </view>
    </view>
    <view class="list">
      <view class="list-item" v-for="item in list" :key="item.id">
        <image
          class="search-icon"
          src="/static/images/search.svg"
          mode="aspectFit"
        />
        <view v-html="item.address"> </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const data = [
  {
    name: '张三',
    age: 18,
    gender: '男',
    address: '北京市朝阳区北京'
  }
]
const list = ref([])
const keyword = ref('')
const search = () => {
  list.value = data.map((item) => {
    return { ...item, address: text2html(item.address, keyword.value) }
  })
}
function text2html(text, keyword) {
  const reg = new RegExp(keyword, 'g')
  return text.replace(reg, `<span style='color: #04B27C'>${keyword}</span>`)
}
</script>

<style lang="scss" scoped>
.search-container {
  display: flex;
  flex-direction: column;
  background-color: #f4f5f7;
  width: 100%;
  height: 100vh;
}
.search {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 14rpx 16rpx;
  border-radius: 16rpx;
  width: 686rpx;
}
.search-icon {
  width: 26rpx;
  height: 26rpx;
  margin-right: 16rpx;
}
.list {
  flex: 1;
  border-radius: 32rpx 32rpx 0 0;
  background-color: #fff;
  overflow-y: auto;
}
.list-item {
  display: flex;
  align-items: center;
  padding: 16rpx;
  border-bottom: 1rpx solid #eeeeee;
  height: 88rpx;
  padding: 0 32rpx;
}
</style>
